/*
 * @Author: your name
 * @Date: 2022-03-30 09:42:11
 * @LastEditTime: 2022-03-30 11:01:14
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \四阶段项目\erp-management-system\src\views\work\work.jsx
 */
import React, { useState, useEffect } from 'react';
import './work.css';
import { Table, Button, Select, Tag } from 'antd'
import { PlusOutlined, TwitterOutlined } from '@ant-design/icons';
const Work = () => {
    const { Option } = Select;
    const [dataSource, setDataSource] = useState()
    const initDate = [
        {
            key: '1',
            read: '已读',
            classify: '日报',
            headline: '超级管理员-日报',
            author: '超级管理员',
            time: '2022-03-30 09:13:33',
            receiver: '超级管理员'
        },
        {
            key: '2',
            read: '未读',
            classify: '工作心得',
            headline: '超级管理员-工作心得',
            author: '超级管理员',
            time: '2022-03-30 09:13:33',
            receiver: '超级管理员'
        },
    ]
    useEffect(() => {
        setDataSource(initDate)
        return () => {

        };
    }, []);

    const columns = [
        {
            title: '阅读',
            dataIndex: 'read',
            key: 'read',
            render: text => {
                if (text == '已读') {
                    return <span style={{ color: "red" }}>已读</span>
                } else {
                    return <span style={{ color: "green" }}>未读</span>
                }
            }
        },
        {
            title: '分类',
            dataIndex: 'classify',
            key: 'classify',
        },
        {
            title: '标题',
            dataIndex: 'headline',
            key: 'headline',
        },
        {
            title: '提交人',
            dataIndex: 'author',
            key: 'author',
        },
        {
            title: '提交时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '接收人',
            dataIndex: 'receiver',
            key: 'receiver',
        },
        {
            title: '管理',
            // dataIndex: 'receiver',
            key: 'receiver',
            // render: data => {
            //     console.log(data);
            //     data.map(item => {
            //         return <>
            //             <Tag icon={<TwitterOutlined />} color="#87d068">批注</Tag>
            //             <Tag icon={<YoutubeOutlined />} color="#cd201f">
            //                 Youtube
            //             </Tag>
            //         </>
            //     }


            //     })
            // }
        },
    ]

    return (
        <>
            <div className='work-container'>
                <div className='tab-search'>
                    <Select style={{ width: '10%', margin: '0 20px' }} defaultValue="1">
                        <Option value="1">日报</Option>
                        <Option value="2">周报</Option>
                        <Option value="3">月报</Option>
                        <Option value="4">季报</Option>
                    </Select>
                    <Button icon={<PlusOutlined />} type="primary">写报告</Button>
                </div>

                <Table dataSource={dataSource} columns={columns} />
            </div>

        </>

    )
}

export default Work;
